<template>
  <div class="facility-dialog">
    <div class="dialog-title">{{ info.deviceName }}</div>
    <div class="remote-restart-btn">
      <div class="btn-i">远程重启</div>
      <img src="@/assets/img/close.png" @click="$emit('close')"/>
    </div>

    <div class="facility-content">
      <div class="top-main">
        <div class="facility-img">
          <img src="@/assets/img/gb/img_insect.png" />
        </div>
        <div class="top-main-right">
          <div class="facility-info">
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_state.png" />
              <div>
                <div class="info-i-text">
                  {{ info.state ? "工作中" : "停止工作" }}
                </div>
                <div class="info-i-title">状态</div>
              </div>
            </div>
            <template v-for="(item, index) in info.propertys" :key="index">
              <div
                class="info-i"
                v-if="
                  item.identifier == 'voltage' || item.identifier == 'workWarm'
                "
              >
                <img
                  class="info-i-icon"
                  src="@/assets/img/gb/icon_voltage.png"
                  v-if="item.identifier == 'voltage'"
                />
                <img
                  class="info-i-icon"
                  src="@/assets/img/gb/icon_temperature.png"
                  v-else
                />
                <div>
                  <div class="info-i-text">{{ item.value }}{{ item.unit }}</div>
                  <div class="info-i-title">{{ item.name }}</div>
                </div>
              </div>
            </template>
          </div>
          <div class="alarm-message">
            <div class="alarm-message-title">
              <img class="alarm-icon" src="@/assets/img/gb/icon_xiaox.png" />
              <div class="alarm-title">报警消息</div>
            </div>
            <div class="alarm-message-content">深层土壤湿度数据异常</div>
          </div>
        </div>
      </div>

      <div class="insect-pest-bottom-main">
        <div class="data-i">
          <div class="model-tltle">病虫击杀统计</div>
          <div class="echarts-main">
            <lineMain :datas="lineDatas" />
          </div>
        </div>
        <div class="data-i">
          <div class="model-tltle">数据上报记录</div>
          <div class="echarts-main">
            <div class="tablemain">
              <el-table
                :data="pestsList"
                style="width: 100%"
                :border="false"
                table-layout="fixed"
                height="100%"
                stripe
                ref="reportTable"
              >
                <el-table-column prop="workState" label="状态" />
                <el-table-column prop="killWorm" label="杀虫数量" />
                <el-table-column prop="workWarm" label="工作温度" />
                <el-table-column prop="controlState" label="控温方式" />
                <el-table-column prop="voltage" label="太阳能电压" />
                <!--              <el-table-column prop="name" label="上报时间" />-->
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { deviceDetail, getPestsNums, getPestsList } from "@/api/deviceInfo";
const lineMain = defineAsyncComponent(() => import("../components/line.vue"));

const info = ref({ deviceName: "" });
const lineDatas = reactive({
  name: "杀虫数",
  unit: "个",
  xData: [],
  yData: [],
});
const pestsList = ref();

function initData(name: string, num: string) {
  getDetail(name);
}
function getDetail(name: string) {
  deviceDetail({ deviceName: name }).then((res) => {
    info.value = res.data;
    /*杀虫统计*/
    getPestsNums({ deviceName: name, dateType: 1, size: 11 }).then(
      (response) => {
        lineDatas.xData = response.data.times;
        lineDatas.yData = response.data.values;
      }
    );
    /*杀虫上报数据*/
    getPestsList({ deviceName: name, size: 5 }).then((response) => {
      pestsList.value = response.data;
    });
  });
}
// 暴露变量
defineExpose({
  initData,
});
</script>

<style scoped lang="scss">
@import "../deviceDialog/dialog";
</style>
